<template>
	<u-picker :model-value="props.modelValue" mode="multiSelector" :range="data.columns" @confirm="confirm"
		:default-selector="data.defaultIndex" @change="change" @cancel="cancel" @close="close"></u-picker>
</template>

<script setup>
	import {
		reactive,
		watch,
		onMounted,
		nextTick
	} from "vue"
	const data = reactive({
		minWage: 16,
		maxWage: 65,
		minwage: '',
		maxwage: '',
		defaultIndex: [0, 0],
		columns: [
			["不限"],
			[]
		]
	})
	const props = defineProps({
		modelValue: Boolean,
		minwage: null,
		maxwage: null
	})
	watch(
		() => ([props.minwage, props.maxwage]), (nv) => {
			data.minwage = nv[0]
			data.maxwage = nv[1]
			if (data.columns[0].length > 0 ) {
				let index = data.columns[0].findIndex(item => parseInt(item) === data.minwage)
				if(index > -1){
					data.defaultIndex[0] = index  
					
				} else{
					data.defaultIndex[0] = 0
				}
				let index2 = data.columns[1].findIndex(item => parseInt(item) === data.maxwage)
				if(index2 >-1){
					data.defaultIndex[1] = index2
				}else{
					data.defaultIndex[0] = 0
					data.columns[1] = [""]
				}
			}
		}, {
			immediate: true
		}
	)
	const emit = defineEmits(['cancel', 'confirm', 'close'])
	const cancel = () => {
		emit('cancel')
	}
	const confirm = (e) => {
		let wage = {
			min: data.columns[0][e[0]],
			max: data.columns[1][e[1]]
		}
		emit('confirm', wage)
	}
	const close = () => {
		emit('close')
	}
	const change = (e) => {
		const {
			columnIndex,
			index
		} = e
		if (columnIndex === 0) {
			let min = data.columns[0][index]
			if(min == "不限"){
				 data.columns[1] = []
			}else{
				nextTick(() => {
					getMaxWageList(min)
				})
			}
		}
	}

	onMounted(() => {
		getMinWageList()
	})
	// 设置薪资数据  key为左侧数据  value为右侧数据
	const setSalaryList = () => {
		let minWage = data.minWage
		let maxWage = data.maxWage
		let wageArray = []
		let listArray = []
		for (let i = 0; i < 49; i++) {
			if (minWage < maxWage) {
				listArray = []
				let listWage = minWage
				for (let j = 0; j < 49; j++) {
					if (listWage <= maxWage) {
						if (listWage !== minWage) {
							listArray.push(listWage)
						}
						listWage += 1
					}
				}
				wageArray[minWage] = listArray
				minWage += 1
			}
		}
		return wageArray
	}
	// 设置最小薪资列表及默认显示数据
	const getMinWageList = () => {
		let pickerWage = setSalaryList()
		// 设置默认选择值
		Object.keys(pickerWage).forEach(function(min, index) {
			data.columns[0].push(parseInt(min))
			if (parseInt(min) === parseInt(data.minwage)) {
				getMaxWageList(min)
			}
			
		})
	}
	// 设置最大薪资列表及默认显示数据
	const getMaxWageList = (min) => {
		let pickerWage = setSalaryList()
		data.columns[1] = pickerWage[min]
		
	}
</script>

<style>
</style>